<template>
    <view class="dialog" @tap="popupEvent">
        <u-popup :show="showPopup" :round="14" mode="bottom" :closeOnClickOverlay="false">
            <view class="area">
                <!-- 主标题 -->
                <view class="main_heading">确认报名</view>
                <!-- 提示 -->
                <view class="hint">
                    <view class="image">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/piliangshezhi_icon1@2.png`" mode="scaleToFill"/>
                    </view>
                    <view>请确认工作时间和工作地点，再点击报名</view>
                </view>
                <!-- 结束时间 -->
                <view>
                    <view class="over_time">结束时间</view>
                    <view class="time">{{ item_data?.start_date }}~{{ item_data?.end_date }}</view> 
                </view>
                <!-- 工作地点 -->
                <view class="base">
                    <view class="over_time">工作地点</view>
                    <view class="time">{{ item_data?.address }}</view>
                </view>
            </view>
            <!-- 底部按钮 -->
            <view>
                <s-button @leftNetWork="leftTrigger" @rightNetWork="rightTrigger"  :leftWidth="'50%'" :rightWidth="'50%'" :type="'twobutton'" :oneText="'我再想想'" :twoText="'报名'" ></s-button>
            </view>
        </u-popup>
    </view>
</template>

<script setup>
    import { baseUrl } from "@/sheep/config";
    import { ref, reactive } from "vue";
    const props = defineProps({
        showPopup:{
            type:Boolean,
            required:true,
            default:false
        },
        listitemID:{
            type:Number,
            required:true
        },
        item_data:{
            type:Object,
            required:true
        }
    })

    const emits = defineEmits(['leftNetWork','rightNetWork']);

    // 左侧我再想想
    const leftTrigger = () => {
        emits('leftNetWork')
    }

    // 右侧报名
    const rightTrigger = () => {
        emits('rightNetWork',props.listitemID)
    }

</script>

<style scoped lang="scss">
    .dialog {
        border-radius: 14rpx 14rpx 0px 0px;
    }
    // 版心
    .area {
        width: calc(100% - 80rpx);
        margin: 0 40rpx;
    }
    .main_heading {
        text-align: center;
        height: 56rpx;
        margin: 30rpx 0 34rpx 0;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 40rpx;
        font-style: normal;
        text-decoration: none;
    }
    .hint {
        height: 70rpx;
        border-radius: 18px;
        background-color: #F8F9FF;
        // #F8F9FF
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-sm;
        font-style: normal;
        display: flex;
        align-items: center;
        line-height: 35rpx;
        margin-bottom: 28rpx;
        .image {
            height: 26rpx;
            width: 26rpx;
            margin-right: 12rpx;
            margin-left: 20rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
    // 结束时间
    .over_time {
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-base;
        font-style: normal;
        text-decoration: none;
        text-align: left;
        margin-bottom: 20rpx;
    }
    .time {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-base;
        font-style: normal;
        text-decoration: none;
        text-align: left;
        margin-bottom: 38rpx;
    }
    // 底部
    .base {
        margin-bottom: 196rpx;
    }
</style>